import { Fragment, defineComponent, reactive, watch } from 'vue';
import { routeInputBox, inputWrap, routeInput, dot1, dot2, dot3, backbtn } from './RouteInput.module.scss';
import { map, marker, navi, poi } from '@/store';
import { ElCol, ElInput, ElRow } from 'element-plus';
import { PoiInfo } from '@/utils/type';
import control from '@/utils/control';
import { detailsObj } from '../details/Details';

/*
---文件
*/
export const routeInputObj = reactive({
    origin: "details" as "details" | "search" | "choice",
    startVal: '',
    endVal: '',
    
})

export default defineComponent({
    name: 'RouteInput',
    data() {
        return {
            imgArray: {
                back: this.$cosUrl + "routeInput/assets/img/back.png",
                plus: this.$cosUrl + "routeInput/assets/img/plus.png"
            },
            dotCount: [0, 1, 2, 3, 4, 5],
        };
    },
    mounted() {
        watch(() => map.routeInputFlag, newValue => {
            console.log('监听routeInputFlag',newValue);
            if (newValue) {
                if(routeInputObj.origin=='choice'){
                    routeInputObj.startVal = poi.start.poiName+'(自选起点)';
                }else{
                    routeInputObj.startVal = poi.start.poiName;
                }
                routeInputObj.endVal = poi.end.poiName;
            }
        });
    },
    methods: {
        backToPrePage() {
            navi.resetNavigation();
            // 显示控件
            control.addControls();
            if (routeInputObj.origin == "details") {
                poi.infoType = "details";
                map.curPageType = "details";
                map.detailsFlag = true;
            } else if (routeInputObj.origin == "search") {
                poi.infoType = "";
                map.curPageType = "search";
                map.searchFlag = true;
            } else if (routeInputObj.origin == "choice") {
                poi.infoType = "details";
                map.curPageType = "menu";
                marker.removeImageMarker();
                map.menuFlag = true;
            }
            map.pathFlag = false;
            map.routeInputFlag = false;
            map.routeFlag = false;
        },
        startInput() {
            poi.requestPoiList2("start", routeInputObj.startVal);
        },
        endInput() {
            poi.requestPoiList2("end", routeInputObj.endVal);
        }
    },
    render() {
        return <Fragment>
            <div class={routeInputBox} v-show={map.routeInputFlag}>
                <div class={inputWrap}>
                    <div>
                        <div class={backbtn} onClick={this.backToPrePage} >
                            <img src={this.imgArray.back} style="width: 10px;" alt="" />
                        </div>
                        <div class={routeInput}>
                            <ElRow>
                                <ElCol span={2}>
                                    <div class={dot1}></div>
                                    {this.dotCount.map(() => {
                                        return <div class={dot2}></div>
                                    })}
                                    <div class={dot3}></div>
                                </ElCol>
                                <ElCol span={18}>
                                    <ElInput
                                        onFocus={this.startInput}
                                        onInput={this.startInput}
                                        v-model={routeInputObj.startVal}
                                        autofocus={true}
                                        class="search-input"
                                        placeholder="请输入起点"
                                    >
                                    </ElInput>
                                    <div class="border"></div>
                                    <ElInput
                                        onFocus={this.endInput}
                                        onInput={this.endInput}
                                        v-model={routeInputObj.endVal}
                                        autofocus={true}
                                        class="search-input"
                                        placeholder="请输入终点"
                                    >
                                    </ElInput>
                                </ElCol>
                            </ElRow>
                        </div>
                    </div >
                </div >
            </div >
        </Fragment >;
    },
});